<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="refresh"content="3;url=http://localhost:8080/html/blockExplore.html">
    <title>Block Info</title>
    <script src="../static/js/jquery.min.js" charset="utf-8"></script>
    <script src="../static/js/bootstrap.min.js" charset="utf-8"></script>
    <script src="../static/vue/vue.min.js"></script>
    <script src="../static/vue/vue-tables-2.min.js"></script>


    <link rel="stylesheet" href="../static/css/bootstrap.min.css">

    <style media="screen">
      .margin-top-5{margin-top: 5px;}
    </style>

  </head>
  <body>
    <div class="container-fluid" id="master-page">
        <div class="row">
          <div class="col-xs-12 text-center">
            <h1>Block Info</h1>
          </div>
        </div>
        <div class="row">
          <div class=" col-xs-12">
            <v-client-table :columns="columns.block" :data="lines.block" :options="options"></v-client-table>
          </div>
        </div>
    </div>
  </body>

  <!-- vue -->
  <script>
  // var ServerIP = window.location.host
  var ServerIP = "127.0.0.1:"+window.location.port
  Vue.use(VueTables.ClientTable);
  var app = new Vue({
  	el: '#master-page',
  	data: function(){
  		return {
        columns:{
          block:["height", "prev_hash", "this_hash", "data_hash","ts","_ts"],
        },
        lines:{
          block:[],
        },
        options: {
  				headings: {
  					height: "区块高度", //
  					prev_hash: "父区块哈希", //
  					this_hash: "自哈希", //
  					data_hash: "数据哈希", //
  					ts: "时间戳", //
  					_ts: "时间", //
  				},
  				sortable: ["height", "prev_hash", "this_hash", "data_hash","ts","_ts",],
          orderBy: { ascending:false, column:"height", }
  			},
  		}
  	},
  	methods: {
      getBlocks: function(){
        var _this = this;
        _this.lines.block = []

  			$.post("http://"+ ServerIP + "/getblockchain",{},function(data,status){
  				if (status=="success") {
            console.log(data);
            var objs = eval(data)
            console.log(objs);
            if (objs==null) {return}

            ["height", "prev_hash", "data_hash","ts","_ts"]
            $.each(objs, function(k,v){
                var tmp = {}
                tmp["height"] = v.height
                tmp["prev_hash"] = v.prev_hash
                tmp["data_hash"] = v.data_hash
                tmp["this_hash"] = v.this_hash
                tmp["_ts"] = (new Date(v.ts*1000)).toLocaleString()
                tmp["ts"] = v.ts

                _this.lines.block.push(tmp)
            });
  				}else{alert("Error!Code: "+status);}
  			});

        return 0
  		},
  	},
  	computed: {
  	},
  	created(){
  		this.getBlocks();
  		// this.getPort();
  		// this.checkStore();
  		// this.getPoolList();
  	}
  });
  </script>
</html>
